<template>
	
	<view>
		<!-- <view class="nav">
			<i class='iconfont icon-fanhui funhui-css' @click="black"></i>
			<text>测评</text>
			<view></view>
		</view> -->

	<view class="content" style="background-image: url('../../static/image/intelligence-test-study_bg.png.png');">
		<view class="bg1"></view>
		<view class="bg2"></view>
		<view class="group">
			<swiper  class="swiper" :current="current" @change="swiperChange">
				<swiper-item catchtouchmove="forbidMove" class="swiper-item " v-for="(item, index) in datas" :key="item.title">
					<view class="topic">
						{{item.evaluating_title}}
					</view>
					<view>
						<radio-group @change="radioChange">
							<label class="option" v-for="(ritem, opt) in item.evaluating_answer" :key="ritem.evaluating_answer_id">
								<view>
									<radio class="radio" :disabled="item.is_disabled" :value="ritem.evaluating_answer_id" />
									<!-- <radio class="radio"  :value="ritem.evaluating_answer_id" /> -->
								</view>
								<view class="text">{{ritem.evaluating_answer_title}}</view>
							</label>
						</radio-group>
					</view>
				</swiper-item>

			</swiper>
			<button @click="click_commit" class="commit" v-if="current==(length-1)">提交</button>
			<view class="current" v-else>{{current+1}}/{{length}}</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0, //滑动页面的ID
				length: 0, //题目的条数
				nums: 0,
				evaluating_dialogue_id: '', //会话id
				datas: [],
				from:''
			}
		},
		onLoad: function(e) {
			var type = e.type || 0; //区别是否是重新测试，当然避开状态判断
			this.length = this.datas.length;
			this.from=e.from;
			/**
			 * 设置标题背景
			 */
			// uni.setNavigationBarColor({
			// 	frontColor: '#000000',
			// 	backgroundColor: "#FFFFFF"
			// });
			// 
			
			/**
			 * 判断会话
			 */
			var _this = this;
			var token = uni.getStorageSync('token');
			this.$zapi.apiPost('user/parevalua.users/state', {
				'k_token': token
			}).then(res => {
				if (res.data.code == 200) {
					/**
					 * 会话处理
					 */
					if (type == 1) {
						_this.getdata();
					} else {
						if (res.data.data.state == 1) {
							uni.redirectTo({
								url: 'cpresult'
							})
						} else {
							_this.getdata();
						}
					}
					/**
					 * 会话处理
					 */
				}
			});
		},
		onBackPress(options) {
			if (options.from === "backbutton") {
				if(this.from=='1'){
					uni.navigateBack({
						delta:1
					});
				}else{
					uni.reLaunch({
						url: '../index/index'
					});
				}
				return false;
			}
		},
		methods: {
			// black:function(){
			// 	if(this.from=='1'){
			// 		uni.navigateBack({
			// 			delta:1
			// 		});
			// 	}else{
			// 		uni.reLaunch({
			// 			url: '../index/index'
			// 		});
			// 	}
			// },
			forbidMove(e){return;},
			radioChange: function(evt) {
				this.nums = this.nums + 1;
				var is_jq = 0;
				if (this.nums == this.length) {
					is_jq = 1;
				}
			
				/**
				 * 提交答题
				 */
				var evaluating_answer_id = evt.target.value;
				var evaluating_id = this.datas[this.current].evaluating_id;
				var evaluating_dialogue_id = this.evaluating_dialogue_id;
				var token = uni.getStorageSync('token');
				this.$zapi.apiPost('user/parevalua.users/addEvaluating', {
					'k_token': token,
					'evaluating_dialogue_id': evaluating_dialogue_id,
					'evaluating_id': evaluating_id,
					'evaluating_answer_id': evaluating_answer_id,
					'is_jq': is_jq
				}).then(res => {
					// console.log(res.data);
				});
					/**
				 * 禁用选择
				 */
				this.datas[this.current].is_disabled = true;
				this.$forceUpdate();
				if (this.current < this.datas.length - 1) {
					this.current = this.current + 1;
				}
				
			},
			swiperChange: function(e) {
				// this.current = e.target.current;

			},
			click_commit: function() {
				if (this.nums == this.length) {
					uni.redirectTo({
						url: 'cpresult?from='+this.from
					});
				} else {
					uni.showToast({
						title: '还有题目未回答',
						icon: 'none',
						duration: 1500
					});
				}

			},
			getdata: function() {
				var _this = this;
				var token = uni.getStorageSync('token');
				_this.$zapi.apiPost('user/parevalua.users/addDialogue', {
					'k_token': token
				}).then(res => {
					if (res.data.code = 200) {
						_this.evaluating_dialogue_id = res.data.data.evaluating_dialogue_id;
						_this.$zapi.apiPost('user/parevalua.lists/evaluatingLists', {
							'k_token': token,
							'evaluating_dialogue_id': _this.evaluating_dialogue_id
						}).then(res => {
							if (res.data.code == 200) {
								this.datas = res.data.data;
								this.length = this.datas.length;
								for (let i = 0; i < this.datas.length; i++) {
									this.datas[i].is_disabled = false;
								}
							}

						});
					}
				});
			}

		}
	}
</script>

<style>
	
		.nav {
		z-index: 999;
		display: flex;
		flex-direction: row;
		position: fixed;
		width: 100%;
		height: 88upx;
		color: #FFFFFF;
		font-size: 36upx;
		padding-top: 40upx;
		line-height: 88upx;
		text-align: center;
		opacity: 1;
		background: #00D5A2;
	}
	
	.nav text {
		margin-left: 33%;
	}
	
	.funhui-css {
		margin-left: 20upx;
		line-height: 88upx;
		transform: rotate(180deg);
		font-size: 30upx;
	}
	
	* {
		margin: 0;
		padding: 0;
	}

	.content {
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		position: absolute;
	}

	.bg1 {
		position: absolute;
		left: 17%;
		bottom: 66upx;
		width: 65%;
		height: 900upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06);
		opacity: 0.8;
		border-radius: 40upx;
	}

	.bg2 {
		position: absolute;
		left: 24.53%;
		bottom: 50upx;
		width: 50%;
		height: 900upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06);
		opacity: 0.6;
		border-radius: 40upx;
	}

	.group {
		position: absolute;
		top: 180upx;
		bottom: 84upx;
		left: 8.5%;
		width: 83%;
		height: auto;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06);
		opacity: 1;
		border-radius: 40upx;
	}

	.swiper {
		width: 100%;
		height: 100%;
		border-radius: 40upx;
		overflow: hidden;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.topic {
		word-wrap: break-word;
		margin-top: 60upx;
		padding-left: 58upx;
		padding-right: 58upx;
		font-size: 32upx;
		color: #333333;
		font-weight: bold;
	}

	.option {
		margin-top: 22upx;
		padding-left: 60upx;
		padding-right: 60upx;
		display: flex;
		flex-direction: row;
	}

	.radio {
		transform: scale(0.7);
	}
	.radio .wx-radio-input.wx-radio-input-checked {
		border: 1px solid #00D5A2 !important;
		background: #00D5A2 !important;
	}

	.text {
		font-size: 28upx;
		line-height: 54upx;
		color: #000000;
		font-weight: 400;
	}

	.current {
		left: 46.4%;
		width: 56upx;
		height: 34upx;
		color: #333333;
		font-size: 28upx;
		position: absolute;
		bottom: 42upx;
	}

	.commit {
		color: #fff;
		font-size: 28upx;
		left: 5%;
		width: 90%;
		height: 80upx;
		position: absolute;
		background: rgba(0, 172, 254, 1);
		bottom: 40upx;
		font-weight: bold;
	}
</style>
